<template>
  <el-form ref="form" :model="form" label-width="120px">
    <operation-item :operations="commonOperations">
      <template v-slot:filter-select="{ operation }">
        <el-select
          v-model="form[operation.field]"
          :placeholder="operation.label"
          clearable
          collapse-tags
          :multiple="operation.traits && (operation.traits.indexOf('multiple') >= 0)"
          :style="operation.style || 'width: 140px'"
          class="filter-item mini"
        >
          <el-option
            v-for="(option) in operation.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
            :disabled="option.disabled"
          />
        </el-select>
      </template>
      <template v-slot:filter-datetime="{ operation }">
        <el-date-picker
          v-model="form[operation.field]"
          :placeholder="operation.label"
          type="datetime"
          :style="operation.style || 'width: 200px'"
          class="filter-item mini"
        />
      </template>
      <template v-slot:filter-timestamp="{ operation }">
        <el-date-picker
          v-model="form[operation.field]"
          :placeholder="operation.label"
          type="datetime"
          :style="operation.style || 'width: 200px'"
          class="filter-item mini"
        />
      </template>
      <template v-slot:filter-string="{ operation }">
        <el-input
          v-model="form[operation.field]"
          :placeholder="operation.label"
          :style="operation.style || 'width: 200px'"
          class="filter-item mini"
        />
      </template>
      <template v-slot:search-string="{ operation }">
        <el-input
          v-model="form[operation.field]"
          :placeholder="operation.label"
          :style="operation.style || 'width: 200px'"
          class="filter-item mini"
          @keyup.enter.native="onSubmit(operation)"
        />
      </template>
    </operation-item>
    <el-button
      v-if="isShowSubmitBtn"
      class="filter-item"
      type="primary"
      icon="el-icon-search"
      @click="onSubmit()"
    >
      搜索
    </el-button>
    <operation-item :operations="operations">
      <template v-slot:create="{ operation }">
        <el-button
          class="filter-item"
          :type="operation.type || 'success'"
          :icon="operation.icon ? 'el-icon-' + operation.icon : 'el-icon-edit'"
          @click="onBtnClick(operation)"
        >
          {{ operation.label || '新增' }}
        </el-button>
      </template>
      <template v-slot:batchJump="{ operation }">
        <el-button
          class="filter-item"
          :type="operation.type"
          :icon="operation.icon ? 'el-icon-' + operation.icon : 'el-icon-tickets'"
          @click="onBtnClick(operation)"
        >
          {{ operation.label }}
        </el-button>
      </template>
      <template v-slot:batchAjax="{ operation }">
        <el-button
          class="filter-item"
          :type="operation.type"
          :icon="operation.icon ? 'el-icon-' + operation.icon : 'el-icon-tickets'"
          @click="onBtnClick(operation)"
        >
          {{ operation.label }}
        </el-button>
      </template>
    </operation-item>
  </el-form>
</template>

<script>
import OperationItem from './operation-item'
import { formatOptions, parseTime } from '@/utils'
export default {
  name: 'ComplexOperation',
  components: { OperationItem },
  // eslint-disable-next-line vue/require-prop-types
  props: ['operations'],
  data() {
    return {
      form: {},
      commonOperations: [],
      isShowSubmitBtn: false
    }
  },
  watch: {
    operations() {
      this.isShowSubmitBtn = false
      this.commonOperations = this.operations.map(operation => {
        if (operation.options) {
          // 有options options格式化
          operation.options = formatOptions(operation.options)
        }
        if (operation.field) {
          if (!operation.inputType) {
            if (operation.action === 'search') {
              operation.inputType = 'string'
            } else {
              operation.inputType = 'select'
            }
          }
          // 有字段 显示搜索按钮
          this.isShowSubmitBtn = true
        }
        return operation
      })

      this.form = this.operations.reduce((previous, current) => {
        if (current.field) {
          previous[current.field] = null
        }
        return previous
      }, {})
    }
  },
  methods: {
    onSubmit() {
      // console.log(this.form, this.operations)
      const query = {}
      const operations = {}
      // 把form的值传给query
      this.operations.map((item, index) => {
        if (
          this.form[item.field] !== undefined &&
          this.form[item.field] !== null &&
          this.form[item.field] !== ''
        ) {
          if (this.form[item.field] instanceof Array && this.form[item.field].length === 0) {
            return
          }

          // 默认值
          if (!query[item.action]) {
            query[item.action] = {}
          }

          if (item.field) {
            switch (item.inputType) {
              case 'timestamp':
                query[item.action][item.field] = (new Date(this.form[item.field])).getTime() / 1000
                break
              case 'datetime':
                query[item.action][item.field] = parseTime(this.form[item.field], '{y}-{m}-{d} {h}:{i}:{s}')
                break

              default:
                query[item.action][item.field] = this.form[item.field]
                break
            }
          }
          operations[item.field] = item
        }
      })
      //  触发父组件submit事件
      this.$emit('submit', query, operations)
    },
    // 按钮点击 触发父组件operation-click事件
    onBtnClick(operation) {
      const row = null
      const column = {
        field: '_action_',
        format: '',
        label: '操作',
        operations: [],
        options: [],
        showStatus: 1,
        traits: [],
        type: 'operations'
      }
      this.$emit('operation-click', { operation, row, column })
    }
  }
}
</script>

<style scoped>

</style>
